<template>
  <div class="login-container">
    <div class="logo" />
    <div class="form">
      <h1>手机号登录</h1>
      <el-card shadow="never" class="login-card">
        <!--登录表单-->
        <!-- el-form > el-form-item > el-input -->
        <!-- <el-form>标签相当于p标签 -->
        <!-- 表单固定三层结构，-->
        <!-- 第一层绑定三个属性：1.ref属性→获取el-form的对象 2.:rules- 定义表单校验的规则3.:model-绑定的表单数据 -->
        <!-- model绑定的表单数据loginForm中放置各个变量内容 -->
        <!-- 第二层 el-form-item: prop-要校验的表单字段，有几个表单数据绑几个prop-->
        <!-- 第三层el-input：v-model-双向绑定数据,绑定的是表单数据中的各个对应内容 例：v-model="loginForm.mobile"-->
        <el-form ref="loginForm" :rules="loginRules" :model="loginForm">
          <el-form-item prop="mobile">
            <el-input v-model="loginForm.mobile" placeholder="请输入手机号" />
          </el-form-item>

          <el-form-item prop="password">
            <el-input v-model="loginForm.password" placeholder="请输入密码" show-password />
          </el-form-item>

          <el-form-item prop="isAgree">
            <el-checkbox v-model="loginForm.isAgree">
              用户平台使用协议
            </el-checkbox>
          </el-form-item>
          <el-form-item>
            <el-button style="width:350px" type="primary" @click="login">登录</el-button>
          </el-form-item>
        </el-form>
      </el-card></div>
  </div></template>
<script>
// import service from '@/utils/request'
export default {
  name: 'Login',
  data() {
    return {
      // 绑定的数据对象
      loginForm: {
        // 开发环境中为了方便可以设置默认数据，但生产环境中(实际上线项目)不可以直接显示用户名和密码
        // 通过设置不同模式
        mobile: process.env.NODE_ENV === 'development' ? '13800000002' : '', // 手机号 和接口文档对应
        password: process.env.NODE_ENV === 'development' ? 'hm#qd@23!' : '', // 密码 和接口文档对应
        isAgree: process.env.NODE_ENV === 'development' // 是否同意平台协议
      },
      // 登录表单的校验的规则
      loginRules: {
        // blur失焦触发正则规则
        // required: true必填项→手机号密码必填
        // change事件为表单数据一发生改变就触发
        mobile: [
          { required: true, message: '请输入手机号', trigger: 'change' },
          { pattern: /^1[3-9]\d{9}$/, message: '手机号格式不正确', trigger: 'change' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          // 方法一 ：正则校验
          // { pattern: /^.{6,16}$/, message: '密码需要为6-16位之间', trigger: 'change' }
          // 方法二：字符串长度校验
          { min: 6, max: 16, message: '密码需要为6-16位之间', trigger: 'change' }
        ],
        // required：true 这个属性只能判断 字段的值为null/undefined/"", 无法判断true/false
        // 布尔型的校验规则要使用自定义校验规则
        isAgree: [
          // rule规则本身  value值本身 true/false  callback是一个回调函数-callback()-通过-callback(错误对象)-不通过
          // 不管成不成功都要执行callback回调函数，成功不传参，失败的话需要穿一个错误对象参数
          // validator回调函数自带三个形参
          {
            validator: (rule, value, callback) => {
              value ? callback() : callback(new Error('请勾选用户平台协议'))
            }
          }

        ]
      }
    }
  },
  methods: {
    // 给登录按钮设置全部校验
    // 通过给最外层的表单数据设置的ref属性来查找到所包含的各个子元素
    // 登录按钮全部校验方法一：
    // login() {
    //   this.$refs.loginForm.validate((isOK) => {
    //     if (isOK) {
    //       alert('校验通过')
    //     }
    //   })
    // }

    // // 登录按钮全部校验方法二：
    // async login() {
    //   try {
    //     // validate为组件库中封装的表单校验方法可以直接调用
    //     await this.$refs.loginForm.validate() // await总是会等待后面的promise进行resolve
    //     alert('成功啦')
    //   } catch (error) {
    //     alert('失败了')
    //   }
    // }

    // 调用方法
    async login() {
      // this.$refs.loginForm.validate((isOK) => {
      //   if (isOK) {
      //     alert('校验通过')
      //   }
      // })
      try {
        await this.$refs.loginForm.validate() // await总是会等待后面的promise进行resolve
        await this.$store.dispatch('user/login', this.loginForm)

        // 跳转到主页，只要添加了await，那么该运行的代码就会等前面的所有promise对象都运行成功才能运行await后面内容
        // promise对象存在一个失败，就会阻断await后面代码运行,只要await有一个不运行，那么后面的代码都不运行
        // 组件中可以使用this
        this.$router.push('/')

        // 封装的service发请求
        // service.post('/sys/login', this.loginForm)
      } catch (error) {
        console.log(error)
      }
    }
  }
}
</script>
<style lang="scss">
.login-container {
  display: flex;
  align-items: stretch;
  height: 100vh;
  .logo {
    flex: 3;
    background: rgba(38, 72, 176) url(../../assets/common/login_back.png)
      no-repeat center / cover;
    border-top-right-radius: 60px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    padding: 0 100px;
    .icon {
      background: url(../../assets/common/logo.png) no-repeat 70px center /
        contain;
      width: 300px;
      height: 50px;
      margin-bottom: 50px;
    }
    p {
      color: #fff;
      font-size: 18px;
      margin-top: 20px;
      width: 300px;
      text-align: center;
    }
  }
  .form {
    flex: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: 176px;
    .el-card {
      border: none;
      padding: 0;
    }
    h1 {
      padding-left: 20px;
      font-size: 24px;
    }
    .el-input {
      width: 350px;
      height: 44px;
      .el-input__inner {
        background: #f4f5fb;
      }
    }
    .el-checkbox {
      color:#606266;
    }
  }
}
</style>
